<template>
	<view class="content">
		<bgyx-nav-bar>
			<view slot="left">
				<image :src="`/static/images/link${$store.state.websocket.connectState ? 's' : 'f'}.png`"
					style="width: 60rpx;height: 60rpx;" mode=""></image>
			</view>
			<view slot="default">
				<b style="font-size: 32rpx;">{{appname}}</b>
			</view>
			<view slot="right" style="display: flex;justify-content: flex-end;align-items: center;">
				<image @click="makeGroup" style="width: 43rpx;height: 43rpx;margin-right: 20rpx;margin-top: 5rpx;" src="/static/images/icon_addgroup.png" />
				<image @click="addUser" style="width: 40rpx;height: 40rpx;" src="/static/images/icon_adduserx.png" />
			</view>
			
		</bgyx-nav-bar>
		
		<view style="width: 100%;padding: 0rpx 10rpx;">
			<chatListItem v-for="(v,k) in chats" :gid="v.group_id" :users="v.users ? v.users : []" :fid="v.friend_id" :unread="v.unread ? v.unread : 0" :name="v.friend_name ? v.friend_name : v.group_name" :subTitle="v.content" :avatar="v.friend_avatar" :lase_time="v.lase_time" />
		</view>
		
		<u-tabbar></u-tabbar>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		pub
	} from '../../common/event';
	import {send} from '@/common/websocket.js'
	import chatListItem from './components/chatListItem.vue'
	export default {
		data() {
			return {
				showPop: false,
				data:[
					{
						name:"测试",
						icon:"/static/logo.png"
					}
				]
			}
		},
		components:{
			chatListItem
		},
		computed: {
			...mapState({
				appname: state => {
					return state.systemInfo.appname
				},
				chats: state => {
					return state.chats.list
				},
			})
		},
		onShow() {
			if(!this.chats || this.chats.length == 0){
				this.$store.dispatch(`chats/init`,{})
			}
		},
		onLoad() {
			this.$event.sub("ces", function(e) {
				console.log(e)
			})
		},
		methods: {
			addUser:function(){
				uni.navigateTo({
					url:"/pages/address/adduser/index"
				})
			},
			tapPopup:function(){
				console.log(123)
				this.showPop = !this.showPop
			},
			ch: function() {
				pub(`ces`, "kkk")
				send({
					type:"ces",
					data:{
						name:"sdgsss"
					}
				})
			},
			makeGroup: function() {
				uni.navigateTo({
					url:"/pages/index/makegroup/index"
				})
			},
			click1: function() {},
			change: function() {
				this.$event.pub(`ces`, 888)
				this.$socket.send({
					type: "text",
					data: "撒旦解放和"
				})
				this.$store.dispatch({
					type: "vuex1/setName",
					payload: "四大护法"
				})
				// this.$store.dispatch({
				// 	type:"vuex0/setName",
				// 	payload:"等等"
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 100rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 28rpx;
		color: $u-content-color;
	}

	.button-demo {
		margin-top: 80rpx;
	}

	.link-demo {
		margin-top: 80rpx;
	}
</style>